---
import type { RoadmapFileType } from '../../lib/roadmap';

export interface Props {
  roadmap: RoadmapFileType;
}

const { roadmap } = Astro.props;
const frontmatter = roadmap.frontmatter;

let roadmapTitle = frontmatter.featuredTitle;

// Lighthouse considers "Go" as a non-descriptive text such as "Submit" etc.
// Adding "Roadmap" as a postfix to make it not complain  ¯\_(ツ)_/¯
if (roadmapTitle === 'Go') {
  roadmapTitle = 'Go Roadmap';
}
---

<a
  class:list={[
    'group border border-slate-800 bg-slate-900 p-2.5 sm:p-3.5 block no-underline rounded-lg relative text-slate-400 font-regular text-md hover:border-slate-600 hover:text-slate-100',
    {
      'opacity-50': roadmap.frontmatter.isUpcoming,
    },
  ]}
  href={`/${roadmap.id}/`}
>
  <span class="text-slate-400">
    {roadmapTitle}
  </span>

  {
    frontmatter.isNew && (
      <span class="absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-purple-300 flex items-center">
        <span class="flex h-2 w-2 mr-1.5">
          <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-purple-400 opacity-75" />
          <span class="relative inline-flex rounded-full h-2 w-2 bg-purple-500" />
        </span>
        New
      </span>
    )
  }

  {
    frontmatter.isUpcoming && (
      <span class="absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-slate-500 flex items-center">
        <span class="flex h-2 w-2 mr-1.5">
          <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-slate-500 opacity-75" />
          <span class="relative inline-flex rounded-full h-2 w-2 bg-slate-600" />
        </span>
        Upcoming
      </span>
    )
  }
</a>
